<template>
  <div v-show="is_ShowModify" class="modify">
    <div class="modifyMaskBg">
      <img @click="op_manage_popFn(false)" src="@/assets/img/account/close.png" alt="" class="closeBtn">

        <div class="modifyTopBg">

          <h3 v-if="showModifyItem=='PhoneNum'">

            <span v-show="!showChange">
              绑定手机号
            </span>
            <span v-show="showChange">
              修改手机号
            </span>
          </h3>
          <h3 v-else-if="showModifyItem=='email'">
            <span v-show="!showChange">
              绑定邮箱
            </span>
            <span v-show="showChange">
              修改邮箱
            </span>
          </h3>
          <h3 v-else-if="showModifyItem=='pwd'">
            <span v-show="!showChange">
              设置密码
            </span>
            <span v-show="showChange">
              修改密码
            </span>
          </h3>
          <h3 v-else-if="showModifyItem=='chargeCoin'">
            立即充值
          </h3>
        </div>
        <div class="modifyBotBg">
           <!--绑定手机号-->
          <div v-if="showModifyItem=='PhoneNum'" class="modifyBot">
            <ul class="acUl">
              <!--重新绑定手机号-->
               <div v-show="showChange">

                <div v-show="is_phone_first_step">
                 <li>
                   <div class="inpWrap">
                     <div class="inpWrapBox">
                         <input v-model="old_MbNumber" class="wid_00" type="text" placeholder="请输入旧手机号">
                         <div class="btnClear">
                           <img @click="clearVal('old_MbNumber')" v-show="old_MbNumber.length!==0" src="@/assets/img/account/clearBtn.png" >
                         </div>
                     </div>
                   </div>
                 </li>
                 <li>
                   <div class="inpWrap">
                     <div class="inpWrapBox">
                         <input v-model="myYzm" class="wid_02" type="text" placeholder="请输入验证码">
                         <div class="btnClear">
                           <img @click="clearVal('myYzm')" v-show="myYzm.length!==0" src="@/assets/img/account/clearBtn.png" >
                         </div>
                     </div>

                     <div @click="secBtn" class="textBtn_01">
                      <span v-show="is_secRev">
                          获取验证码
                        </span>
                        <span v-show="!is_secRev">
                          重新获取({{sec}}s)
                        </span>

                     </div>
                   </div>
                 </li>

                 <div @click="submitBtn('PhoneNum')" class="nextStep">
                    下一步
                  </div>

                </div>

                <div v-show="!is_phone_first_step">
                 <li>
                   <div class="inpWrap">
                     <div class="inpWrapBox">
                         <input v-model="new_MbNumber" class="wid_00" type="text" placeholder="请输入新手机号">
                         <div class="btnClear">
                           <img @click="clearVal('new_MbNumber')" v-show="new_MbNumber.length!==0" src="@/assets/img/account/clearBtn.png" >
                         </div>
                     </div>
                   </div>
                 </li>

                <!-- <li>
                   <div class="inpWrap">
                     <div class="inpWrapBox">
                         <input v-model="MbNumPwd" class="wid_00" type="password" placeholder="请输入密码">
                         <div class="btnClear">
                           <img @click="clearVal('MbNumPwd')" v-show="MbNumPwd.length!==0" src="@/assets/img/account/clearBtn.png" >
                         </div>
                     </div>
                   </div>
                 </li> -->

                 <li>
                   <div class="inpWrap">
                     <div class="inpWrapBox">
                         <input v-model="myYzm" class="wid_02" type="text" placeholder="请输入验证码">
                         <div class="btnClear">
                           <img @click="clearVal('myYzm')" v-show="myYzm.length!==0" src="@/assets/img/account/clearBtn.png" >
                         </div>
                     </div>

                     <div @click="secBtn" class="textBtn_01">
                      <span v-show="is_secRev">
                          获取验证码
                        </span>
                        <span v-show="!is_secRev">
                          重新获取({{sec}}s)
                        </span>

                     </div>
                   </div>
                 </li>

                 <div @click="submitBtn('PhoneNum')" class="nextStep">
                    确定
                  </div>
                </div>
               </div>


                <!--/重新绑定手机号-->

                <div v-show="!showChange">
                  <li>
                    <div class="inpWrap">
                      <div class="inpWrapBox">
                          <input v-model="MbNumber" class="wid_00" type="text" placeholder="请输入手机号">
                          <div class="btnClear">
                            <img @click="clearVal('MbNumber')" v-show="MbNumber.length!==0" src="@/assets/img/account/clearBtn.png" >
                          </div>
                      </div>
                    </div>
                  </li>


                  <li>
                    <div class="inpWrap">
                      <div class="inpWrapBox">
                          <input v-model="MbNumPwd" class="wid_00" type="password" placeholder="请输入密码">
                          <div class="btnClear">
                            <img @click="clearVal('MbNumPwd')" v-show="MbNumPwd.length!==0" src="@/assets/img/account/clearBtn.png" >
                          </div>
                      </div>
                    </div>
                  </li>

                  <li>
                    <div class="inpWrap">
                      <div class="inpWrapBox">
                          <input v-model="myYzm" class="wid_02" type="text" placeholder="请输入验证码">
                          <div class="btnClear">
                            <img @click="clearVal('myYzm')" v-show="myYzm.length!==0" src="@/assets/img/account/clearBtn.png" >
                          </div>
                      </div>

                      <div @click="secBtn" class="textBtn_01">
                       <span v-show="is_secRev">
                           获取验证码
                         </span>
                         <span v-show="!is_secRev">
                           重新获取({{sec}}s)
                         </span>

                      </div>
                    </div>
                  </li>

                  <div @click="submitBtn(showModifyItem)" class="nextStep">
                    确定
                  </div>
                </div>


              </ul>

          </div>

          <!--绑定邮箱-->

          <div v-else-if="showModifyItem=='email'" class="modifyBot">

            <ul class="acUl">
              <!--重新绑定邮箱-->
              <div v-show="showChange">
                <div v-show="is_email_first_step==1">
                   <div><!--请输入旧邮箱地址-->
                       <li>
                         <div class="inpWrap">
                           <div class="inpWrapBox">
                               <input v-model="old_email_addr" class="wid_00" type="text" placeholder="请输入旧邮箱地址">
                               <div class="btnClear">
                                 <img @click="clearVal('old_email_addr')" v-show="old_email_addr.length!==0" src="@/assets/img/account/clearBtn.png" >
                               </div>
                           </div>
                         </div>
                       </li>

                       <li><!--请输入验证码-->
                         <div class="inpWrap">
                           <div class="inpWrapBox">
                               <input v-model="email_yzm" class="wid_02" type="text" placeholder="请输入验证码">
                               <div class="btnClear">
                                 <img @click="clearVal('email_yzm')" v-show="email_yzm.length!==0" src="@/assets/img/account/clearBtn.png" >
                               </div>
                           </div>

                           <div @click="secBtn" class="textBtn_01">
                            <span v-show="is_secRev">
                                获取验证码
                              </span>
                              <span v-show="!is_secRev">
                                重新获取({{sec}}s)
                              </span>

                           </div>
                         </div>
                       </li>


                       <div @click="submitBtn('email')" class="nextStep">
                         下一步
                       </div>
                   </div>
                </div>

                <div v-show="is_email_first_step==2">
                <li><!--请输入新邮箱地址-->
                  <div class="inpWrap">
                    <div class="inpWrapBox">
                        <input v-model="new_email_addr" class="wid_00" type="text" placeholder="请输入新邮箱地址">
                        <div class="btnClear">
                          <img @click="clearVal('new_email_addr')" v-show="new_email_addr.length!==0" src="@/assets/img/account/clearBtn.png" >
                        </div>
                    </div>
                  </div>
                </li>
                <!--请输入密码-->
               <!-- <li>
                  <div class="inpWrap">
                    <div class="inpWrapBox">
                        <input v-model="email_pwd" class="wid_00" type="password" placeholder="请输入密码">
                        <div class="btnClear">
                          <img @click="clearVal('email_pwd')" v-show="email_pwd.length!==0" src="@/assets/img/account/clearBtn.png" >
                        </div>
                    </div>
                  </div>
                </li> -->

                <li><!--请输入验证码-->
                  <div class="inpWrap">
                    <div class="inpWrapBox">
                        <input v-model="email_yzm" class="wid_02" type="text" placeholder="请输入验证码">
                        <div class="btnClear">
                          <img @click="clearVal('email_yzm')" v-show="email_yzm.length!==0" src="@/assets/img/account/clearBtn.png" >
                        </div>
                    </div>

                    <div @click="secBtn" class="textBtn_01">
                     <span v-show="is_secRev">
                         获取验证码
                       </span>
                       <span v-show="!is_secRev">
                         重新获取({{sec}}s)
                       </span>

                    </div>
                  </div>
                </li>

                  <div @click="submitBtn('email')" class="nextStep">
                    确定
                  </div>
               </div>
              </div>
              <!--/重新绑定邮箱-->
              <div v-show="!showChange">
              	<li><!--请输入邮箱地址-->
                  <div class="inpWrap">
                    <div class="inpWrapBox">
                        <input v-model="email_addr" class="wid_00" type="text" placeholder="请输入邮箱地址">
                        <div class="btnClear">
                          <img @click="clearVal('email_addr')" v-show="email_addr.length!==0" src="@/assets/img/account/clearBtn.png" >
                        </div>
                    </div>
                  </div>
                </li>

                <!--请输入密码-->
              	<li>
                  <div class="inpWrap">
                    <div class="inpWrapBox">
                        <input v-model="email_pwd" class="wid_00" type="password" placeholder="请输入密码">
                        <div class="btnClear">
                          <img @click="clearVal('email_pwd')" v-show="email_pwd.length!==0" src="@/assets/img/account/clearBtn.png" >
                        </div>
                    </div>
                  </div>
                </li>

                <li><!--请输入验证码-->
                  <div class="inpWrap">
                    <div class="inpWrapBox">
                        <input v-model="email_yzm" class="wid_02" type="text" placeholder="请输入验证码">
                        <div class="btnClear">
                          <img @click="clearVal('email_yzm')" v-show="email_yzm.length!==0" src="@/assets/img/account/clearBtn.png" >
                        </div>
                    </div>

                    <div @click="secBtn" class="textBtn_01">
                     <span v-show="is_secRev">
                         获取验证码
                       </span>
                       <span v-show="!is_secRev">
                         重新获取({{sec}}s)
                       </span>

                    </div>
                  </div>
                </li>
                <div @click="submitBtn('email')" class="nextStep">
                  确定
                </div>
               </div>
              </ul>

          </div>

          <!--修改密码-->
          <div v-else-if="showModifyItem=='pwd'" class="modifyBot">
            <ul class="acUl">
              	<li>
                  <div class="inpWrap">
                    <div class="inpWrapBox">
                        <input v-model="oldPwd" class="wid_00" type="password" placeholder="请输入旧密码">
                        <div class="btnClear">
                          <img @click="clearVal('oldPwd')" v-show="oldPwd.length!==0" src="@/assets/img/account/clearBtn.png" >
                        </div>
                    </div>
                  </div>
                </li>

                <!-- <li>
                  <div class="inpWrap">
                    <div class="inpWrapBox">
                        <input v-model="myYzm" class="wid_02" type="text" placeholder="请输入验证码">
                        <div class="btnClear">
                          <img @click="clearVal('myYzm')" v-show="myYzm.length!==0" src="@/assets/img/account/clearBtn.png" >
                        </div>
                    </div>

                    <div @click="secBtn" class="textBtn_01">
                     <span v-show="is_secRev">
                         获取验证码
                       </span>
                       <span v-show="!is_secRev">
                         重新获取({{sec}}s)
                       </span>

                    </div>
                  </div>
                </li> -->

              	<li>
                  <div class="inpWrap">
                    <div class="inpWrapBox">
                        <input v-model="newPwd" class="wid_00" type="password" placeholder="请输入新密码">
                        <div class="btnClear">
                          <img @click="clearVal('newPwd')" v-show="newPwd.length!==0" src="@/assets/img/account/clearBtn.png" >
                        </div>
                    </div>
                  </div>
                </li>


              </ul>

          </div>

          <!--充值金额-->
          <div v-else-if="showModifyItem=='chargeCoin'" class="modifyBot">

            <ul v-show="!is_show_payCode" class="chargeCoinUL">
              <li class="chargeInp">
                <input type="number" v-model="banlanceMoney" placeholder="请输入充值金额">
              </li>

              <li>
                <ul class="payMethod">
                  <li @click="c_methFn(1)" :class="{'c_NumAc':cur_c_NumAc==1}">
                      <div class="tu">
                        <img src="@/assets/img/coinCharge/wxpay.png" >
                      </div>
                      <div class="txt">
                        <p>
                          微信支付
                        </p>
                      </div>
                    </li>
                  	<li @click="c_methFn(2)" :class="{'c_NumAc':cur_c_NumAc==2}">
                      <div class="tu">
                        <img src="@/assets/img/coinCharge/alipay.png" >
                      </div>
                      <div class="txt">
                        <p>
                          支付宝支付
                        </p>
                      </div>
                    </li>

                </ul>
              </li>
              <li>


              </li>
            </ul>
            <div v-show="is_show_payCode" class="payCodeBg" ref="qrCodeDiv"></div>
          </div>


          <div v-show="!isChangePhone_Email">
            <div v-show="!is_show_payCode" @click="submitBtn(showModifyItem)" class="qrBtn">
              确定
            </div>
          </div>
        </div>
    </div>
  </div>
</template>

<script>
    import QRCode from 'qrcodejs2';
  export default{
    name:"",
    data(){
      return{
        is_ShowModify:false,//true,
        showModifyItem:"",
        showChange:null,

        sec:60,
        is_secRev:true,
        sec_timer:null,

        //手机号
        MbNumber:"",
        MbNumPwd:"",

        //重新绑定
        old_MbNumber:"",
        new_MbNumber:"",

        //修改密码
        oldPwd:"",
        newPwd:"",
        //验证码
        myYzm:"",

        cur_c_NumAc:null,
        is_show_payCode:false,

        banlanceMoney:"",
        cur_pay_Type:"",
        banlanceQrCode:"",
        PayResTimer:null,

        // 订单
        order_sn:"",

        //绑定邮箱
        email_addr:"",
        email_pwd:"",
        email_yzm:"",
        old_email_addr:"",
        new_email_addr:"",

        isChangePhone_Email:false,
        is_email_first_step:1,//false//true
        is_phone_first_step:1//false//true

      }
    },
    created() {
      let that=this;
      this.$bus.$on("op_manage_Event",(x,y,z)=>{
        that.op_manage_popFn(x);
        that.showChange=z;
        that.showModifyItem=y;
        if(that.showModifyItem=="PhoneNum"||that.showModifyItem=="email"){
          that.isChangePhone_Email=true;
        }else{
          that.isChangePhone_Email=false;
        }
        console.log("is_ShowModify:",this.is_ShowModify);
        console.log("isChangePhone_Email:",this.isChangePhone_Email);
      });
    },

    deactivated() {
      let that=this;
      //that.delPayResTimer();
      console.log("deactivated");
    },

    watch:{
      is_ShowModify:{
        handler:function(newVal,oldVal){
          console.log("newVal:",newVal);
          this.MbNumber="";
          this.MbNumPwd="";
          this.old_MbNumber="";
          this.new_MbNumber="";
          this.oldPwd="";
          this.newPwd="";
          this.myYzm="";
          this.banlanceMoney="";
          this.cur_pay_Type="";
          this.banlanceQrCode="";
          this.order_sn="";

          this.email_addr="";
          this.email_pwd="";
          this.email_yzm="";
          this.old_email_addr="";
          this.new_email_addr="";

          this.is_email_first_step=1;
          this.is_phone_first_step=1;
          this.acSecTimer();
        },
        deep:true,
        immediate:true
      }
    },

    methods:{
      delPayResTimer(){
        let that=this;
        clearInterval(that.PayResTimer);
        that.PayResTimer=null;
      },
      addPayResTimer(){
        let that=this;
        that.PayResTimer=setInterval(()=>{
          that.cxPayStatusFn();
        },2500);
      },

      // 查询扫码支付状态
      cxPayStatusFn(){
        let that=this;
        this.$request.get(
          "/order/queryPayResult",
          {
            order_sn:that.order_sn
          },
          {
            'Content-Type': 'application/x-www-form-urlencoded'
          }
        ).then((res)=>{
         	console.log("查询扫码支付状态请求成功：",res);
          if(res.data.code==200){
            console.log("删除轮询");
            that.delPayResTimer();
            that.op_manage_popFn(false);
            this.$bus.$emit("refreshU_InfoEvent");
          }

         })
         .catch((err)=>{
         	console.log("查询扫码支付状态请求失败：",err);
         });
      },

      bindPhoneNum(x,y,z){
       let that=this;
        this.$request.post(
          "/user/bindMobile",
          {
            mobile:x,
            code:y,
            password:z
          }
        )
        .then(res=>{
        	 console.log("绑定手机号结果res：",res);
           if(res.data.code==200){
             that.op_manage_popFn(false);
             this.$bus.$emit("refreshU_InfoEvent");
           }


        })
        .catch(err=>{
        	console.log("绑定手机号请求失败：",err);
        });

      },
      c_methFn(val){
          let that=this;
          that.cur_c_NumAc=val;
          if(that.cur_c_NumAc==1){
            that.cur_pay_Type="wxpay";
          }else if(that.cur_c_NumAc==2){
            that.cur_pay_Type="alipay";
          }

          console.log("当前充值类型：",that.cur_pay_Type);
        },

      chargeBanlanceFn(){
        let that=this;
        this.$request.post(
          "/order/recharge",
          {
            money:that.banlanceMoney,
            pay_type:that.cur_pay_Type
          }
        )
        .then(res=>{
        	 console.log("余额充值结果res：",res);
           that.banlanceMoney="";
           if(res.data.code==200){
             //that.op_manage_popFn(false);
             console.log("充值成功");
             //that.banlanceQrCode=res.data.data.qr_code;
             that.order_sn=res.data.data.order_sn;
             this.$refs.qrCodeDiv.innerHTML="";
             that.is_show_payCode=true;
             new QRCode(this.$refs.qrCodeDiv, {
                	  text: res.data.data.qr_code,
                	  width: 200,
                	  height: 200,
                	  colorDark: "#333333", //二维码颜色
                	  colorLight: "#ffffff", //二维码背景色
                	  correctLevel: QRCode.CorrectLevel.L//容错率，L/M/H
             });
             that.addPayResTimer();
           }
        })
        .catch(err=>{
        	console.log("余额充值请求失败：",err);
        });

      },

      submitBtn(val){
        console.log("提交类型：",val);
        let that=this;
        if(val=="PhoneNum"){
          if(!that.showChange){
            console.log("绑定手机号");
            that.bindPhoneNum(that.MbNumber,that.myYzm,that.MbNumPwd);
          }else{
            console.log("修改手机号");
            if(that.is_phone_first_step==1){
                that.yzBindPhoneFn(that.old_MbNumber);
              }else if(that.is_phone_first_step==2){
                that.yzBindPhoneFn(that.new_MbNumber);
              }

          }


        }else if(val=="chargeCoin"){
          that.chargeBanlanceFn();
        }else if(val=="email"){
          //1169354502@qq.com
          if(that.showChange){
            if(that.is_email_first_step==1){
              that.yzBindEmailFn(that.old_email_addr);
            }else if(that.is_email_first_step==2){
              that.yzBindEmailFn(that.new_email_addr);
            }
          }else{
            that.bindEmailFn();
          }

        }else if(that.showModifyItem=="pwd"){
          if(that.oldPwd.length!==0&&that.newPwd.length!==0){
            that.bindPwdFn();
          }else{
            this.$bus.$emit("toastEvent","请把信息填写正确!");
          }

        }
      },

      bindEmailFn(){
        let that=this;
        this.$request.post(
          "/user/bindEmail",
          {
          	email:that.email_addr,
            password:that.email_pwd,
            code:that.email_yzm
          }
        )
        .then(res=>{
        	 console.log("邮箱绑定请求成功：",res);
           if(res.data.code==200){
             that.email_yzm="";
             that.op_manage_popFn(false);
             this.$bus.$emit("refreshU_InfoEvent");
             that.acSecTimer();
           }
        })
        .catch(err=>{
        	console.log("邮箱绑定请求失败：",err);
        });

      },

      yzBindEmailFn(val){
        let that=this;
        this.$request.post(
          "/user/changeEmail",
          {
          	email:val,
            captcha:that.email_yzm,
            step:that.is_email_first_step
          }
        )
        .then(res=>{
        	 console.log("验证绑定邮箱请求成功：",res);
           if(res.data.code==200){
             if(that.is_email_first_step==1){
               that.is_email_first_step=2;
             }else if(that.is_email_first_step=2){
               that.op_manage_popFn(false);
               that.is_email_first_step=1;
             }
             that.email_yzm="";
             that.acSecTimer();
             this.$bus.$emit("refreshU_InfoEvent");
             this.$bus.$emit("toastEvent",res.data.msg);
           }else if(res.data.code==10000&&that.is_email_first_step==2){
             that.is_email_first_step=1;
           }
        })
        .catch(err=>{
        	console.log("验证绑定邮箱请求失败：",err);
        });
      },
      yzBindPhoneFn(val){
        let that=this;
        this.$request.post(
          "/user/changeMobile",
          {
          	mobile:val,
            captcha:that.myYzm,
            step:that.is_phone_first_step
          }
        )
        .then(res=>{
        	 console.log("验证绑定手机号请求成功：",res);
           if(res.data.code==200){
             if(that.is_phone_first_step==1){
               that.is_phone_first_step=2;
             }else if(that.is_phone_first_step=2){
               that.op_manage_popFn(false);
               that.is_phone_first_step=1;
             }
             that.myYzm="";
             that.acSecTimer();
             this.$bus.$emit("refreshU_InfoEvent");
             this.$bus.$emit("toastEvent",res.data.msg);
           }else if(res.data.code==10000&&that.is_phone_first_step==2){
             that.is_phone_first_step=1;
           }
        })
        .catch(err=>{
        	console.log("验证绑定手机号请求失败：",err);
        });
      },


      bindPwdFn(){
        let that=this;
        this.$request.post(
          "/user/editPassword",
          {
          	old:that.oldPwd,
            new:that.newPwd
          }
        )
        .then(res=>{
        	 console.log("密码请求成功：",res);
           if(res.data.code==200){
             that.op_manage_popFn(false);
             this.$bus.$emit("refreshU_InfoEvent");
             this.$bus.$emit("toastEvent",res.data.msg);
           }else{
             this.$bus.$emit("toastEvent",res.data.msg);
           }
        })
        .catch(err=>{
        	console.log("密码请求失败：",err);
        });
      },

      clearVal(val){
        this[val]="";
        console.log('val:',val)
      },

      acSecTimer(){
        let that=this;
        that.sec=60;
        that.is_secRev=true;
        clearInterval(that.sec_timer);
        that.sec_timer=null;
      },

      sendEmailMsg(val,zhi){
        let that=this;
        this.$request.post(
          "/ems/send",
          {
          	email:zhi,
            event:val
          }
        )
        .then(res=>{
        	 console.log("邮箱验证码请求成功：",res);
           if(res.data.code==200){
               that.addSendMsgTimer();
            }


        })
        .catch(err=>{
        	console.log("邮箱验证码请求失败：",err);
        });

      },

      sendMsgFn(val,zhi){
        let that=this;
        console.log("showModifyItem:",that.showModifyItem);
        this.$request.post(
           "/sms/send",
           {
              mobile:zhi,
              event:val
           },
           {
              'Content-Type': 'application/x-www-form-urlencoded'
           }
         ).then((res)=>{
         console.log("发送验证码请求成功：",res);
         //that.is_Show_nickname=false;
         //that.getU_Info();
         if(res.data.code==200){
            that.addSendMsgTimer();
         }

        })
        .catch((err)=>{
         console.log("发送验证码请求失败：",err);
        });
      },

      addSendMsgTimer(){
        let that=this;
        if(that.is_secRev){
          that.is_secRev=false;
          that.sec_timer=setInterval(()=>{
            if(that.sec<=0){
              that.acSecTimer();
            }else{
              that.sec--;
            }
          },1000);
        }

      },

      secBtn(){
        let that=this;
        if(that.showModifyItem=="PhoneNum"){

            if(that.showChange){
              console.log("重新绑定手机号");
              if(that.is_phone_first_step==1){
                console.log("修改手机号第一步");
                that.sendMsgFn("change_email",that.old_MbNumber);
              }else if(that.is_phone_first_step==2){
                console.log("修改手机号第二步");
                that.sendMsgFn("register",that.new_MbNumber);
              }

            }else{
              console.log("第一次绑定手机号");
              if(that.MbNumber.length!==0){
                that.sendMsgFn("register",that.MbNumber);
              }else{
                this.$bus.$emit("toastEvent","请输入手机号!");
              }

            }

        }else if(that.showModifyItem=="email"){
          if(that.showChange){
            console.log("重新绑定邮箱");
            if(that.is_email_first_step==1){
              that.sendEmailMsg("change_email",that.old_email_addr);
            }else if(that.is_email_first_step==2){
              that.sendEmailMsg("register",that.new_email_addr);
            }

          }else{
            console.log("第一次绑定邮箱");
            if(that.email_addr.length!==0){
              that.sendEmailMsg("register",that.email_addr);
            }else{
              this.$bus.$emit("toastEvent","请输入邮箱地址!");
            }
          }


        }
      },

      op_manage_popFn(val,pop_str){
        let that=this;
        this.is_ShowModify=val;
        if(pop_str="chargeCoin"){

          that.is_show_payCode=false;
           console.log("that.is_show_payCode:",that.is_show_payCode);
        }
      }
    }
  }
</script>

<style lang="less" scoped="scoped">
  .c_NumAc{
  	border-color: #2c8eff !important;
  }

  .c_NumAc:after{
  	content: "";
  	position: absolute;
  	bottom: -1px;
  	right: -1px;
  	width:38px;
  	height: 36px;
  	background: url(../assets/img/coinCharge/selected.png) no-repeat center center;
  	background-size: 100% 100%;
  }

  .modify{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,.5);
    z-index: 11;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    .modifyMaskBg{
      position: relative;
          border-radius: 8px;
          width: 470px;
      background: #fff;
      >img{
        position: absolute;
                top: 25px;
                right: 25px;
            cursor: pointer;
            width: 15px;
            opacity: 0.5;
      }
      >img:hover{
        opacity: .8;
      }
      .modifyTopBg{
          padding: 45px 20px 10px;
          h3{
            text-align: center;
            font-weight: normal;
            font-size: 20px;
                color: #282828;
                line-height: 24px;
          }
      }
      .modifyBotBg{
          padding: 0 56px 59px;
          .modifyBot{
            .acUl{
                    overflow: hidden;
                    li{
                      margin-top: 20px;
                      display: flex;
                      flex-direction: row;
                      .inpWrap{
                            height: 50px;
                            border-radius: 25px;
                            border: 1px solid #dbdbdb;
                            overflow: hidden;
                            display: flex;
                            flex-direction: row;
                            .textBtn{
                              font-size: 12px;
                                  color: #999;
                                  margin: 0 24px;
                                  cursor: pointer;
                                  line-height: 50px;
                            }

                            .textBtn_01{
                              width: 111px;
                              display: flex;
                              justify-content: center;
                              align-items: center;
                              border-left: 1px solid #dbdbdb;
                              span{
                                  font-size: 14px;
                                  color: #2c8eff;
                                  cursor: pointer;
                                  line-height: 50px;
                              }
                            }
                        .inpWrapBox{
                            display: flex;
                            flex-direction: row;
                            .wid_00{
                              width: 290px;
                            }
                            .wid_01{
                              width: 194px;
                            }
                            .wid_02{
                              width: 180px;
                            }
                            input{
                              display: block;
                              border: none;
                              outline: none;
                              color: #000;
                              font-size: 14px;
                              line-height: 50px;
                              padding: 0 20px;
                              background: none;
                            }

                            input::placeholder{
                              color: #dbdbdb;
                            }

                            .btnClear{
                              width: 26px;
                              display: flex;
                              flex-direction: column;
                              justify-content: center;
                              align-items: center;
                              img{
                                display: block;
                                width: 13px;
                                cursor: pointer;
                              }
                            }
                            .btnSee{
                              width: 26px;
                              display: flex;
                              flex-direction: column;
                              justify-content: center;
                              align-items: center;
                              img{
                                display: block;
                                width: 16px;
                                cursor: pointer;
                              }
                            }
                        }

                      }
                      .xieyi{
                        display: flex;
                        flex-direction: row;
                        align-items: center;
                        height: 19px;
                        input{
                          display: block;
                          margin-right: 5px;
                          cursor: pointer;

                        }
                        label{
                          display: block;
                          font-size: 12px;
                          color: #666;
                          line-height: 20px;
                          cursor: pointer;
                        }
                        span{
                          display: block;
                          font-size: 12px;
                          color: #ff6b00;
                          line-height: 20px;
                          cursor: pointer;
                        }
                      }
                      .tjBtn_00{
                        display: block;
                        border: none;
                        outline: none;
                        cursor: pointer;
                            background: linear-gradient(90deg, #409dff 0%, #1e85fb 100%);
                            color: #fff;
                              border-radius: 25px;
                              font-size: 13px;
                              width: 100%;
                              height: 50px;
                      }

                      .btnDl{
                        display: flex;
                        flex-direction: row;
                        justify-content: center;
                        width: 100%;
                        dt,dd{
                            font-size: 14px;
                            line-height: 20px;
                        }
                        dt{
                          color: #ccc;
                        }
                        dd{
                          color: #2c8eff;
                          cursor: pointer;
                        }
                      }
                    }
            }

            .chargeCoinUL{
              .chargeInp{
                input{
                  display: block;
                      border-radius: 4px;
                      border: 1px solid #DCDFE6;
                      color: #606266;
                      background: none;
                      width: 300px;
                      margin: 20px auto;
                      //display: inline-block;
                      font-size: 15px;
                      height: 40px;
                      line-height: 40px;
                      outline: 0;
                      padding: 0 15px;
                }
              }

              >li{

                .payMethod{
                	display: flex;
                	flex-direction: row;
                	li{
                		    width: 220px;
                		    height: 86px;
                		border: 1px solid #d4d4d4;
                		border-radius: 8px;
                		overflow: hidden;
                		margin: 10px 7px;
                		cursor: pointer;
                		position: relative;
                		display: flex;
                		flex-direction: row;
                		justify-content: center;
                		align-items: center;
                		.tu{
                			width: 40px;
                			height: 40px;
                			display: flex;
                			flex-direction: row;
                			align-items: center;
                			justify-content: center;
                			margin-right: 6px;
                			img{
                				display: block;
                				max-width: 100%;
                				max-height: 100%;
                			}
                		}

                		.txt{
                			display: flex;
                			flex-direction: column;
                			justify-content: center;
                			p{
                				    font-size: 16px;
                				    line-height: 26px;
                				    color: #4e4e4e;
                			}
                			span{
                				display: block;
                				    font-size: 14px;
                				    color: #969696;
                					line-height: 20px;
                			}
                		}
                	}
                	li:hover{
                		border-color: #999;
                	}
                }
              }
            }

          }
      }
    }
  }

  .nextStep,.qrBtn{
        display: block;
        border: none;
        outline: none;
        cursor: pointer;
        background: linear-gradient(90deg, #409dff 0%, #1e85fb 100%);
        color: #fff;
        border-radius: 25px;
        font-size: 15px;
        width: 200px;
        height: 50px;
        line-height: 50px;
        margin:20px auto 0;
        text-align: center;
  }

  .payCodeBg{
      width: 200px;
      height: 200px;
      margin:40px auto 0;
    }


@media screen and (max-width:767px) {
  .modify .modifyMaskBg{
      width: 320px;
      .modifyBotBg{
        padding: 0 15px 59px;
        .chargeCoinUL{
          .chargeInp{
            input[type="number"]{
              width: 260px;
            }
          }

          >li{
            .payMethod{
              flex-direction: column !important;
              align-items: center;
            }
          }
        }

        .modifyBot{
          .acUl{
            li{
              .inpWrap{
                .inpWrapBox{
                  .wid_00{
                    width: 222px;
                  }
                  .wid_02{
                    width: 110px;
                  }
                }
              }
            }
          }
        }
      }
  }
}


</style>
